<template>
	<view class="my-venues">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#0E9698" :activeStyle="{
          color: '#0E9698',
        }" :inactiveStyle="{
          color: '#353535',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<view class="list" v-if="list.length">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="" v-if="currentTab == 0">
					<!-- <view class="share_a">
						<u-button id="shareBtn" plain='true' open-type="share" 
							customStyle="border:none ;color :#0E9698;" @click="fx_click(item)">分享</u-button>
					</view> -->
					<!-- <view class="share_m" v-if="item.beShare == 1">
						球友分享
					</view> -->
				</view>

				<view v-if="currentTab == 0">
					<view class="d-flex" @click="fieldclick(item)">
						<!-- <u-image width="124rpx" height="124rpx" radius="10rpx" src="../../static/img/icon10.png"></u-image> -->
						<view>
							<view class="name blod">{{item.venue_name}}</view>
							<view class="venue">{{item.field_name}} </view>
							<view class="date">{{item.day}} {{item.stime}}-{{item.etime}}</view>
						</view>
					</view>
				</view>

				<view class="d-flex" v-if="currentTab == 1">
					<view>
						<view class="name blod">{{item.venue_name}}</view>
						<view class="venue">{{item.field_name}} </view>
						<view class="date">{{item.day}} {{item.stime}}-{{item.etime}}</view>
					</view>
				</view>

				<view @click="fieldclick(item)">
					<view class="d-flex" v-if="currentTab == 0" style="
					  display: flex;
					  justify-content: space-between;
					  align-items: center;
					">
						<view class="venus-name"> {{item.place_name}} </view>
						<!-- <view class="venus-name"> 名额场 </view> -->
						<!-- <view class="venus-name" style="color: coral;"> 包场 </view> -->
						<view style="width: 100rpx; height: 100rpx;margin-top: -40rpx;">
							<view class="qrcode" style="margin-left: 50rpx;margin-top: 50rpx;">
								<u-image :src="`${assetsPath}20231120/5aa3a39426a67ed4556b50fff5fed1e7.png`"
									width="52rpx" height="52rpx"></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" /> -->
	</view>
</template>

<script>
	const index = require('@/api/index/index.js')
	export default {
		data() {
			return {
				share: {
					title: '自定义分享标题',
					fx_goods_image: '',
				},
				panel: false,
				status: 0,
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				tabsList: [{
						name: "待使用"
					},
					// {
					// 	name: "待结账"
					// }, 
					{
						name: "不可用"
					}
				],
				list: [],
				listQuery: { //分页
					limit: 8,
					page: 1,
				},

				totalPage: "",
				over: "",
				currents: 0
			};
		},
		onLoad(options) {
			this.wxplace()
		},
		methods: {
			// 场地包未使用 
			async wxplace() {
				let that = this;
				if (that.listQuery.page === 1) that.list = [];
				let params = {
					page: this.listQuery.page,
					limit: this.listQuery.limit,
					order: 'desc',
					sort: 'id'
				}
				let res = await index.wxplace(params)
				if (res.code === 1) {
					console.log(res, '[[[pp]]]')
					// this.list = res.data.result
					that.list = that.list.concat(res.data.rows); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},
			//场地包已结束
			async wxplaceno() {
				let that = this;
				if (that.listQuery.page === 1) that.list = [];
				let params = {
					page: this.listQuery.page,
					limit: this.listQuery.limit,
					order: 'desc',
					sort: 'id'
				}
				let res = await index.wxplaceno(params)
				if (res.code === 1) {
					console.log(res, '[[[pp]]]')
					// this.list = res.data.result
					that.list = that.list.concat(res.data.rows); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				if (this.currentTab == 0) {
					this.wxplace()
				} else if (this.currentTab == 1) {
					this.wxplaceno()
				}
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				if (index == 0) {
					this.wxplace()
				} else if (index == 1) {
					this.wxplaceno()
				}

			},
			fx_click(item) {
				this.share.fx_goods_image = item.goods.goods_image
			},
			fieldclick(item) {
				uni.navigateTo({
					url: '../qrcode/qrcode?ids=' + item.id
				})
			},
			// 分享页面
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
				}
				return {
					title: '太行羿文体教培',
					path: '/pages/personal/personal?id=' + 12,
					imageUrl: this.share.fx_goods_image, //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
					success: function(res) {
						// 转发成功之后的回调
						if (res.errMsg == 'shareAppMessage:ok') {}
					},
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.venus-name {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.share {
		width: 68rpx;
		height: 68rpx;
		background: rgb(14, 150, 152);
		background: linear-gradient(45deg,
				rgba(14, 150, 152, 1) 0%,
				rgba(14, 150, 152, 0.7) 77%,
				rgba(14, 150, 152, 0.4) 100%);
		border-bottom-left-radius: 100rpx;
		position: absolute;
		right: 0;
		top: 0;

		/deep/ .u-icon {
			display: flex;
			justify-content: flex-end;
			margin-right: 7rpx;
		}
	}

	.share_s {
		font-size: 32rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		color: #0E9698;
	}

	.my-venues {
		padding-bottom: env(safe-area-inset-bottom);

		/deep/.u-tabs {
			background-color: #fff;
			background: #ffffff;
			// background: linear-gradient(113deg, #F1F5FC, #FFFFFF);
			// box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.08);
			// border-bottom: 1px solid #e5e5e5;
			// margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 30rpx;
			line-height: 34rpx;
			color: #333333;
		}

		.item {
			padding: 30rpx;
			// background: #ffffff;
			box-shadow: 0px 6rpx 13rpx 1rpx rgba(23, 106, 180, 0.2);
			background: linear-gradient(113deg, #dce6fc, #ebebeb);
			box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.08);
			border-radius: 20rpx;
			position: relative;

			&+.item {
				margin-top: 30rpx;
			}

			.name {
				font-size: 30rpx;
			}

			.venue {
				font-size: 24rpx;
				margin: 19rpx 0;
			}

			.date {
				font-size: 24rpx;
				color: #000;
			}

			.to {
				background: #000;
				border-radius: 50%;
				width: 51rpx;
				height: 51rpx;
			}

			.share_m {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 12%;
				right: -30rpx;
				font-size: 25rpx;

			}

			.share_mc {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 18%;
				right: 160rpx;
				font-size: 25rpx;

			}

			.share_a {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 5%;
				right: 3rpx;

				#shareBtn {
					width: 110rpx;
					height: 60rpx;
					position: absolute;
					border-radius: 50%;
					top: 0;
					left: -2rpx;
					opacity: 0.1;
					font-size: 20rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
	}
</style>